<template>
  <div class="wode">
    <van-nav-bar
      class="tou-bu"
      title="网易云音乐"
      :left-text="listdata.profile.nickname"
      left-arrow
      @click-left="onClickLeft"
    >
    </van-nav-bar>
    <div class="xin-xi">
      <div class="xx-left">
        <van-image
          class="yuan-img"
          round
          width="80px"
          height="80px"
          :src="listdata.profile.avatarUrl"
        />
      </div>
      <div class="xx-right">
        <div class="xx-top">
          <p><span>{{listdata.profile.gender}}</span><br>粉丝</p><span class="sp1">|</span>
          <p><span>{{listdata.profile.newFollows}}</span><br>关注</p><span class="sp1">|</span>
          <p><span>LV.{{listdata.level}}</span><br>等级</p>
        </div>
        <div class="xx-bt">
          编辑信息
        </div>
      </div>
    </div>
    <van-tabs
      v-model="activeName"
      class="big-tab"
    >
      <van-tab
        title="主页"
        name="a"
      >
        <div class="tab-1">
          <div class="p1">基本信息</div>
          <div class="p2">村龄:<span>2年(2019年01月注册)</span></div>
          <div class="p3">地区:<span>湖南 长沙</span></div>
        </div>
        <div class="tab-2">
          <div class="p1">音乐品味</div>
          <div class="p2"><img
              src="img/111.jpg"
              alt=""
            >
            <div class="d1">
              <span class="sp1">听歌排行</span><br>
              <span class="sp2">累计听歌{{listdata.listenSongs}}首</span>
            </div>
          </div>
          <div class="p3">
            <img
              src="img/222.jpg"
              alt=""
            >
            <div class="d1">
              <span class="sp1">我喜欢的音乐</span><br>
              <span class="sp2">122首,播放1233次</span>
            </div>
          </div>
        </div>
      </van-tab>
      <van-tab
        title="动态"
        name="b"
      >
        <div class="tab-3">
          <span>暂时还没有动态哦</span>
        </div>
      </van-tab>
      <van-tab
        title="播客"
        name="c"
      >
        <div class="tab-4">
          <div class="d1">
            <img
              src="img/333.jpg"
              alt=""
            >
          </div>
          <div class="d3">
            暂无声音
          </div>
          <div class="d4">
            开始录制你的第一条声音吧
          </div>
          <div class="d2">
            去录制
          </div>
        </div>
      </van-tab>
    </van-tabs>
    <div
      class="tui-chu"
      @click="tuiChu"
    >
      退出登录
    </div>
  </div>
</template>
<script>

export default {
  data: () => ({
    activeName: 'a',
    listdata: JSON.parse(localStorage.listdata || '[]')
  }),
  created() {

  },
  methods: {
    onClickLeft() {
      this.$router.go(-1)
    },
    tuiChu() {
      this.$dialog.alert({
        title: '网易云音乐',
        message: '确定退出此账号吗?',
        showCancelButton: true
      })
        .then(() => {
          localStorage.removeItem('listdata')
          this.$router.push('/recommend')
        })
        .catch(() => {
          console.log('取消')
        })
    }
  }

}
</script>
<style lang="less" >
.wode {
  width: 100%;
  height: ceil(100vh);
  background-color: #f5f5f5;
  .tou-bu {
    background-color: #f5f5f5;
  }
  .van-nav-bar__text {
    color: #000;
  }
  .van-icon::before {
    color: #000;
  }
  .xin-xi {
    width: 100%;
    height: 100px;
  }
  .xin-xi {
    display: flex;
    justify-content: space-between;
    .xx-left {
      .yuan-img {
        margin-top: 10px;
        margin-left: 17px;
      }
    }
    .xx-right {
      width: 260px;
      height: 100px;
      .xx-top {
        margin-top: 4px;
        display: flex;
        justify-content: space-evenly;
        .sp1 {
          color: #e7e7e7;
          font-weight: 100;
          margin-top: 12px;
          font-size: 24px;
        }
        p {
          font-size: 12px;
          color: #666;
          text-align: center;
          span {
            font-size: 14px;
            font-weight: 600;
            color: #000;
          }
        }
      }
      .xx-bt {
        width: 250px;
        height: 24px;
        border: 1px solid #ccc;
        font-size: 12px;
        border-radius: 16px;
        text-align: center;
        line-height: 24px;
        margin: 0px auto;
      }
    }
  }
  .van-tab {
    background-color: #f5f5f5;
  }
  .tab-1 {
    width: 350px;
    height: 100px;
    background-color: #fff;
    margin: 0px auto;
    border-radius: 14px;
    margin-top: 15px;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    .p1 {
      font-size: 14px;
      font-weight: 600;
      margin-left: 15px;
    }
    .p2 {
      font-size: 12px;
      margin-left: 15px;
      color: #666;
      span {
        margin-left: 4px;
      }
    }
    .p3 {
      font-size: 12px;
      margin-left: 15px;
      color: #666;
      span {
        margin-left: 4px;
      }
    }
  }
  .tab-2 {
    width: 350px;
    height: 160px;
    background-color: #fff;
    margin: 0px auto;
    border-radius: 14px;
    margin-top: 15px;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    img {
      width: 50px;
      height: 50px;
      margin-left: 15px;
      float: left;
    }
    .p1 {
      font-size: 14px;
      font-weight: 600;
      margin-left: 15px;
    }
    .p2 {
      .d1 {
        float: left;
        height: 50px;
        box-sizing: border-box;
        padding: 5px 0px;
        margin-left: 10px;
        .sp1 {
          font-size: 16px;
        }
        .sp2 {
          font-size: 12px;
          color: #666;
        }
      }
    }
    .p3 {
      .d1 {
        float: left;
        height: 50px;
        box-sizing: border-box;
        padding: 5px 0px;
        margin-left: 10px;
        .sp1 {
          font-size: 16px;
        }
        .sp2 {
          font-size: 12px;
          color: #666;
        }
      }
    }
  }
  .tab-3 {
    text-align: center;
    width: 100%;
    height: ceil(100vh);
    background: #fff;
    margin-top: 15px;
    box-sizing: border-box;
    padding-top: 50px;
    span {
      font-size: 12px;
      color: #666;
    }
  }
  .tab-4 {
    img {
      width: 100px;
      height: 100px;
      margin: 0px auto;
      display: block;
      margin-top: 50px;
    }
    .d2 {
      width: 100px;
      height: 34px;
      background: #fb3d3f;
      border-radius: 20px;
      text-align: center;
      line-height: 34px;
      color: #fff;
      font-size: 14px;
      border: 1px solid #fb3d3f;
      letter-spacing: 1px;
      margin: 0 auto;
      margin-top: 20px;
    }
    .d3 {
      text-align: center;
      font-weight: 600;
      font-size: 14px;
      margin-top: 5px;
    }
    .d4 {
      text-align: center;
      color: #666;
      font-size: 12px;
      margin-top: 5px;
    }
  }
  .tui-chu {
    width: 200px;
    height: 35px;
    background: #fb3d3f;
    border-radius: 18px;
    color: #fff;
    text-align: center;
    line-height: 35px;
    font-size: 14px;
    position: fixed;
    top: 92%;
    left: 24%;
    z-index: 1998;
  }
}
</style>
